<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <!--1、Head：标题、css-->
    <head th:replace="fragment/backend_fragment::headOne(添加用户)"></head>

    <!--2、JS-->
    <div th:replace="fragment/backend_fragment::myJsOne"></div>

    <!--3、内容-->
    <body style="background-color: #FFFFFF">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px; margin-bottom: 40px; font-size: 60px">
            <legend>用户：添加页面</legend>
        </fieldset>

        <div style=" width:500px; margin:0 auto">
            <form class="layui-form" action="/backend/userAdd" th:action="@{/backend/userAdd}" method="post">

                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input name="username" class="layui-input" type="text" placeholder="请输入用户名" autocomplete="off" lay-verify="username">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input name="password" class="layui-input" type="password" placeholder="请输入密码" autocomplete="off" lay-verify="password">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">昵称</label>
                    <div class="layui-input-block">
                        <input name="nickname" class="layui-input" type="text" placeholder="请输入昵称" autocomplete="off" lay-verify="nickname">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">头像</label>
                    <div class="layui-input-block">
                        <input name="avatar" class="layui-input" type="tel" autocomplete="off" placeholder="请设置头像" lay-verify="avatar">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input name="email" class="layui-input" type="text" autocomplete="off" placeholder="请输入邮箱" lay-verify="email">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-filter="formDemo" lay-submit>提交</button>
                        <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                    </div>
                </div>
            </form>
        </div>
        <script type="text/javascript">
            layui.use(['form'], function () {
                var form = layui.form;
                //自定义验证规则
                form.verify({
                    username: function (value) {
                        if (value.length < 4) {
                            return '请输入至少4位的用户名';
                        }
                    },
                    password: function (value) {
                        if (value.length < 6) {
                            return '密码至少6位';
                        }
                    },
                    nickname: function (value) {
                        if (value.length < 1) {
                            return '昵称不能为空！！';
                        }
                    },
                    avatar: function (value) {
                        if (value.length < 1) {
                            return '头像不能为空！！';
                        }
                    }
                    , email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']
                });

                //监听提交
                form.on('submit(formDemo)', function(data){
                    //ajax
                    //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                    //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value};获取单个值data.field["title"]
                });
            });
        </script>
    </body>



    <!--4、添加用户，状态判断-->
    <script th:inline="javascript">
        layui.use('layer', function(){
            var layer = layui.layer;
            var userAddMessage = [[${userAddMessage}]];

            if(userAddMessage == 'true'){
                layer.alert('添加用户：成功！！！', {
                    icon: 6,
                    title: "提示"
                });
            }else if(userAddMessage == 'false'){
                layer.alert('添加用户：失败，数据库异常', {
                    icon: 5,
                    title: "提示"
                });
            }
        });
    </script>

</html>